import { Button, Col, Form, Modal, Row, Select, Table } from "antd";
import React, { useEffect, useRef, useState } from "react";
import type { PaginationProps } from "antd";
import instance from "@/request";
import styles from "./index.module.less";
import { SEARCHINFO, DATALIST, STRING } from "./typeing";
const { Option } = Select;
const assetsTransfer: React.FC = () => {
    const [form] = Form.useForm();
    const current = useRef(1);
    const offset = useRef(20);
    const project = useRef();
    const date = useRef();
    const [assetPlanidList, setAssetPlanidList] = useState<STRING[]>();
    const [sliceDate, setSliceDate] = useState<STRING[]>();
    const [searchInfo, setSearchInfo] = useState<SEARCHINFO>();
    const [modalOpen, setModalOpen] = useState(false);

    const getAssetPlanidTransfer = async () => {
        const response: any = await instance.post("/adc/asset_planid_transfer");
        setAssetPlanidList(response);
        getSliceDate(response[0]);
        project.current = response[0];
    };
    const getSliceDate = async (value: STRING) => {
        const response: any = await instance.post(
            "/adc/asset_planid_to_transferdate",
            { plan_code: value }
        );
        setSliceDate(response);
        form.setFieldsValue({ project: value, date: response[0] });
        date.current = response[0];
        handleSearch();
    };
    useEffect(() => {
        getAssetPlanidTransfer();
    }, []);
    const pagination: PaginationProps = {
        total: searchInfo?.total,
        current: current.current,
        pageSize: offset.current,
        onChange: (page, pageSize) => {
            current.current = page;
            offset.current = pageSize;
            handleSearch();
        },
    };
    const handleSearch = async () => {
        const response: any = await instance.post(
            "/adc/get_asset_transfer_list_page",
            {
                plan_code: project.current,
                transfer_date_id: date.current,
                page: current.current,
                offset: offset.current,
            }
        );
        setSearchInfo(response);
    };

    const columns = [
        {
            title: '借据号',
            dataIndex: 'AccountNo',
            key: 'AccountNo',
            render: (text: STRING, record: DATALIST) => {
                return <Button type="link" onClick={() => {
                    setModalOpen(true);
                    getDetailList(record);
                }}>{text}</Button>
            }
        },
        {
            title: '资产计划代码',
            dataIndex: 'TrustCode',
            key: 'TrustCode'
        },
        {
            title: '客户Id',
            dataIndex: 'customerid',
            key: 'customerid'
        },
        {
            title: '产品类型',
            dataIndex: 'ProductName',
            key: 'ProductName'
        },
        {
            title: '分期期数',
            dataIndex: 'LoanTerm',
            key: 'LoanTerm'
        },
        {
            title: '放款时间',
            dataIndex: 'LoanReleaseDate',
            key: 'LoanReleaseDate'
        },
        {
            title: '年化利率',
            dataIndex: 'AnnualInterestRate',
            key: 'AnnualInterestRate'
        },
        {
            title: '贷款本金(元)',
            dataIndex: 'LoanPrincipal',
            key: 'LoanPrincipal'
        },
        {
            title: '剩余本金(元)',
            dataIndex: 'RemainingPrincipal',
            key: 'RemainingPrincipal'
        },
        {
            title: '信托计划名称',
            dataIndex: 'TrustName_DXM',
            key: 'TrustName_DXM'
        },
        {
            title: '转让日期',
            dataIndex: 'transfer_date_id',
            key: 'transfer_date_id'
        },
    ]
    const [transferList, setTransterList] = useState<{ [x: STRING]: STRING; }[]>()
    const getDetailList = async (record: DATALIST) => {
        const { AccountNo, transfer_date_id } = record;
        const response: any = await instance.post(
            "/adc/get_asset_transfer_detail_page",
            {
                AccountNo,
                transfer_date_id,
            }
        );
        let customerArray: { [x: STRING]: STRING; }[] = [];
        for (let key in response[0]) {
            customerArray.push({ [key]: response[0][key] });
        }
        setTransterList(customerArray)
    };
    return (
        <div className={styles.assetsTransfer}>
            <Form
                className="layoutContainer__form"
                form={form}
                onFinish={handleSearch}
            >
                <Form.Item label={<b>{"项目代码"}</b>} name="project">
                    <Select
                        className="layoutContainer__item"
                        onChange={(value) => (project.current = value)}
                    >
                        {assetPlanidList &&
                            assetPlanidList.map((item: STRING) => {
                                return (
                                    <Option value={item} key={item}>
                                        {item}
                                    </Option>
                                );
                            })}
                    </Select>
                </Form.Item>
                <Form.Item label={<b>{"切片日期"}</b>} name={"date"}>
                    <Select
                        className="layoutContainer__item"
                        onChange={(value) => (date.current = value)}
                    >
                        {sliceDate &&
                            sliceDate.map((item) => {
                                return (
                                    <Option value={item} key={item}>
                                        {item}
                                    </Option>
                                );
                            })}
                    </Select>
                </Form.Item>
                <Form.Item>
                    <Button
                        htmlType="submit"
                        type="primary"
                        onClick={() => handleSearch()}
                    >
                        {"查询"}
                    </Button>
                </Form.Item>
            </Form>
            <Table
                dataSource={searchInfo?.data}
                columns={columns}
                pagination={{ ...pagination }}
                className={styles.assetsTransfer__table}
            />
            <Modal
                open={modalOpen}
                onCancel={() => setModalOpen(false)}
                footer={null}
                width={"80%"}
            >
                <div className={styles.assetsTransfer__modal}>
                    <Row gutter={[0, 10]}>
                        {transferList &&
                            transferList.map((item) => {
                                const entries: [STRING, STRING][] = Object.entries(item);
                                return (
                                    <Col span={8}>
                                        {<b>{entries[0][0]}</b>}
                                        {'：'}
                                        {entries[0][1]}
                                    </Col>
                                );
                            })}
                    </Row>
                </div>
            </Modal>
        </div>
    );
};

export default assetsTransfer;
